<template>
  <l-layout class="l-tab-page" :left="240" >
    <template #left>
      <l-panel :title="$t('公司信息')" style="padding-right:0;">
        <el-tree
          :data="lr_companyTree"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleCompanyClick"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-layout>
      <template #left>
        <l-panel
          :title="$t('部门信息')"
          style="padding-left:0;padding-right:0;"
        >
          <el-tree
            :data="departmentsTree"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleDepartmentClick"
          >
            <span class="lr-tree-node" slot-scope="{ node }">
              {{ $t(node.label) }}
            </span>
          </el-tree>
        </l-panel>
      </template>
      <l-select-panel
        v-model="value"
        ref="selectPanel"
        valueKey="f_UserId"
        pageLayout="total,prev, pager, next"
        :columns="columns"
        :loadSelectTable="loadSelectTable"
        style="padding:8px;padding-left:0;"
        @change="handleChange"
      >
        <template v-slot:f_Gender="scope">
          <el-tag v-if="scope.row.f_Gender == 1" size="mini" type="success"
            >男</el-tag
          >
          <el-tag v-else size="mini" type="danger">女</el-tag>
        </template>
        <template v-slot:f_CompanyId="scope">
          {{
            (
              lr_companyList.find(
                (t) => t.f_CompanyId == scope.row.f_CompanyId
              ) || {}
            ).f_FullName || ""
          }}
        </template>
        <template v-slot:f_DepartmentId="scope">
          {{
            lr_departmentName(
              lr_departments[scope.row.f_CompanyId] || [],
              scope.row.f_DepartmentId
            )
          }}
        </template>
      </l-select-panel>
    </l-layout>
  </l-layout>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      companyId: "",
      departmentId: "",
      columns: [
        { label: "姓名", prop: "f_RealName", minWidth: "110" },
        { label: "账号", prop: "f_Account", width: "110" },
        { label: "公司", prop: "f_CompanyId", minWidth: "120" },
        { label: "部门", prop: "f_DepartmentId", minWidth: "88" },
        { label: "性别", prop: "f_Gender", width: "56", align: "center" },
      ],
      showType: 1,

      userList: [],

      selectList:{}
    };
  },
  computed: {
    departmentsTree() {
      if (this.lr_departments) {
        return this.lr_departmentTree(this.lr_departments[this.companyId]);
      } else {
        return [];
      }
    },
  },
  methods: {
    initForm(){
      this.tableLoadData();
    },
    tableLoadData() {
      this.$refs.selectPanel.init();
    },
    async loadSelectTable(postData) {
      this.showType = postData.showType;
      postData.sidx = "F_CreateDate DESC";
      if (postData.showType == 1) {
        postData.companyId = this.companyId;
        postData.departmentId = this.departmentId;
      } else {
        postData.page = 1;
      }
      const res = await this.lr_getUserPage(postData);
      if (res) {
        res.rows.forEach((item) => {
          this.lr_loadDepartments(item.f_CompanyId);
        });

        this.userList = res.rows;
        return res;
      }
      else{
        return {page:1,records:0,rows:[],total:0}
      }
    },
    handleCompanyClick(node) {
      this.lr_loadDepartments && this.lr_loadDepartments(node.f_CompanyId);
      this.companyId = node.f_CompanyId;
      this.departmentId = "";
      this.tableLoadData();
    },
    handleDepartmentClick(node) {
      this.departmentId = node.value;
      this.tableLoadData();
    },

    handleChange(vlist) {
      const map = {}
      vlist.forEach(t=>{
        map[t] = true;
      })

      const addVList = vlist.filter(t=>!this.selectList[t]);
      const addList = []
      this.userList.forEach(t=>{
        if(addVList.indexOf(t.f_UserId) > -1){
          addList.push({
            f_UserId:t.f_UserId,
            f_Type:1,
            f_Name:t.f_RealName,
            f_Category:1
          })
        }
      })
      this.selectList = map;
      this.$emit("change", {values:vlist,addList,type:1});
    },

    resetForm() {
      this.clear();
    },
    clear(){
      this.$refs.selectPanel.handleClear();
    },
    delete(id){
      this.$refs.selectPanel.toggleRowSelection([id],false);
    },

    setForm(value) {
      this.value = String(value);
      const map={}
      value.forEach(t=>{
        map[t] = true;
      })
      this.selectList = map;
      this.tableLoadData();
    },
  },
};
</script>
